<template>
    <h1>子订单管理</h1>
    <el-row>
        <el-col :span="23"></el-col>
        <el-col :span="1">
            <el-button size="small" type="warning" @click="back">返回</el-button>
        </el-col>
    </el-row>
    
    <el-table :data="pageInfo.list"
                stripe
                style="width:100%"
                border
                :header-cell-style="{textAlign:'center'}"
                :cell-style="{textAlign:'center'}">
        <el-table-column prop="orderCode"
                        label="订单编号"
                        width="180px"></el-table-column>
        <el-table-column prop="spuName"
                        label="Spu名称"
                        ></el-table-column>
        <el-table-column prop="spuBrand"
                        label="Spu品牌"></el-table-column>
        <el-table-column prop="skuName"
                        label="Sku名称"
                        width="280px"
                        :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="skuPrice"
                        label="Sku单价"></el-table-column>  
        <el-table-column prop="skuQuantity"
                        label="Sku数量"></el-table-column> 
        <el-table-column prop="realAmount"
                        label="实际金额"></el-table-column>             
        <el-table-column prop="skuAttrsVals"
                        label="sku销售属性"
                        :show-overflow-tooltip="true">
        </el-table-column>                            
        <el-table-column label="操作"
                        width="300px">
        <template #default="scope">
            <el-button size="small"
                    type="primary"
                    @click="detail(scope)">详细信息</el-button>
        </template>
        </el-table-column>
    </el-table>

    <el-pagination class="el-pagination"
                    layout="prev,pager,next,total,jumper,sizes"
                    :total="pageInfo.total"
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[3,5,10,20]"
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange">
    </el-pagination>

    <el-drawer v-model="drawer" title="title—useless" :with-header="false" size="40%">
        <span><h4>子订单详细信息</h4></span>
        <el-divider content-position="center">子订单{{orderItem.id}}</el-divider>
        <span>
            <el-descriptions
                class="margin-top"
                :column="3"
                :size="small"
                :style="blockMargin"
                border
            >
                <el-descriptions-item label="订单编号">{{orderItem.orderCode}}</el-descriptions-item>
                <el-descriptions-item label="商品名称" span="2">{{orderItem.spuBrand}} {{orderItem.spuName}} {{orderItem.skuName}}</el-descriptions-item>
                <el-descriptions-item label="商品单价">{{orderItem.skuPrice}}</el-descriptions-item>
                <el-descriptions-item label="购买数量">{{orderItem.skuQuantity}}</el-descriptions-item>
                <el-descriptions-item label="支付金额">{{orderItem.realAmount}}</el-descriptions-item>
                <el-descriptions-item label="商品属性" span="3">{{orderItem.skuAttrsVals}}</el-descriptions-item>
                <el-descriptions-item label="商品图片" span="3">
                    <img :src="orderItem.skuImg"/>
                </el-descriptions-item>
            </el-descriptions>
        </span>
    </el-drawer>
</template>

<script>
import {ref, reactive, getCurrentInstance} from 'vue'
export default {
    setup(){
        const {proxy} = getCurrentInstance();
        const pageNum = ref(1);
        const pageSize = ref(5);
        const drawer = ref(false);
        const orderId = ref(proxy.$route.query.orderId);
        const orderItem = ref({});
        const pageInfo = ref(
            {
                total:0,
                pageNum:1,
                pageSize:5,
                size:0,
                startRow:0,
                endRow:0,
                pages:0,
                prePage:0,
                nextPage:0,
                isFirstPage:true,
                isLastPage:true,
                hasPreviousPage:false,
                hasNextPage:false,
                navigatePages:8,
                navigatepageNums:[],
                navigateFirstPage:0,
                navigateLastPage:0,
                list:[]
            }
        );
        const orderItemInfo = reactive({

        });

        const getData = () => {
            proxy.$http.get(proxy.$url.OmsOrderItemControllerBaseUrl + '/getPaged',{params:{pageNum:pageNum.value,pageSize:pageSize.value,orderId:orderId.value}}).then((res) => {
                if(res.data.code == 2000){
                    pageInfo.value = res.data.data
                    pageNum.value = pageInfo.value.pageNum
                    pageSize.value = pageInfo.value.pageSize
                    for(let item of pageInfo.value.list){
                        item.detailAddress = item.receiverProvince + item.receiverCity + item.receiverRegion + item.receiverDetailAddress
                    }
                }
            })
        };

        const detail = (scope) => {
            let passOrderInfo = {...scope.row};
            let passOrderItems = {};
            orderItem.value = {};
            proxy.$http.get(proxy.$url.OmsOrderItemControllerBaseUrl + '/selectAll',{params:{orderId:orderId.value}}).then(res => {
                if(res.data.code == 2000){
                    passOrderItems = res.data.data;
                    for(let item of passOrderItems){
                        if(item.id == passOrderInfo.id){
                            orderItem.value = item
                        }
                    }
                }
            })
            drawer.value = true;
        };

        const back = () => {
            proxy.$router.push('/main/order/order')
        };

        const handleCurrentChange = () => {
            getData()
        };
        const handleSizeChange = () => {
            getData()
        };

        getData()
        return {
            pageInfo,
            orderItemInfo,
            pageNum,
            pageSize,
            orderId,
            drawer,
            orderItem,

            getData,
            handleCurrentChange,
            handleSizeChange,
            back,
            detail,
        }
    }
}
</script>

<style scope>

</style>